<template>
  <div id="leftcenter"></div>
</template>

<script>
import * as echarts from "echarts";
import { mapState, mapGetters } from 'vuex';
export default {
  name: "省/市诗词数量分布气泡图",
  data() {
    return {
      chart: null, // ECharts 实例
      nationalData: [
        [448, '四川'],
        [ 91, '湖南'],
        [ 58, '湖北'],
        [38, '河南'],
        [248, '陕西'],
        [477, '重庆'],
        [107, '甘肃'],
        [18, '山东'],
      ],
    };
  },
  computed: {
    ...mapState(['selectedProvince']),
    ...mapGetters(['selectedcityData']),
    effectiveData() {
      if (this.selectedProvince) {
        //console.log(this.selectedcityData)
        //console.log(this.selectedcityData['成都市'])
        return Object.entries(this.selectedcityData).map(([city, count]) => {
          return [count, city]; // [诗词数量, 市名]
        });
      }
      return this.nationalData.map(item => [item[0], item[1]]);
    }
  },
  mounted() {
   
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('leftcenter'));
      this.updateChartOption();
    },
    updateChartOption() {
     
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross', // 默认为直线，可选为：'line' | 'shadow'  
          },  
          // formatter: function (params) {
          //   return params[0].name + '岁：' + params[0].value + '（人）';
          // }
          formatter: function (params) {
  return params[0].name + '岁：' + Math.round(params[0].value) + '（首）';
}

        },
        xAxis: {
          type: 'category',
          data: this.effectiveData.map(item => item[1]), 
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: {
            fontSize: 12,
            rotate: 45, // 旋转标签，避免重叠
            interval: 0, // 显示所有标签
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: {
            fontSize: 12
          },
          scale: true
        },
        series: [
          {
            name: '人数',
            data: this.effectiveData.map(item => item[0]), 
            type: 'scatter',
            symbolSize: function (data) {
              // 参照data[1]人数数值设置散点标记的大小
              return Math.sqrt(data) * 4;
            },
            itemStyle: {
              // 阴影模糊大小
              shadowBlur: 10,
              // 阴影颜色及透明度
              shadowColor: 'rgba(190, 210, 187, 0.6)',
              // 阴影垂直偏移
              shadowOffsetY: 5,
              // 通过径向渐变设置图形颜色
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: '#3d8e86'
                },
                {
                  offset: 1,
                  color: '#88bfb8'
                }
              ]),
              emphasis: {
                color: 'rgba(200, 107, 55, 0.6)'
              }
            },
            markLine: {
              // data: [
              //   { type: 'average', name: '平均值' }
              // ],
              data: [
    { 
      type: 'average', 
      name: '平均值',
      label: {
        formatter: function (params) {
          return Math.round(params.value);
        }
      }
    }
  ],
              lineStyle: {
                color: '#a04c3b'
              },
              label: {
                fontSize: 20
              }
            }
          }
        ]
      };

      this.chart.setOption(option);
      //window.addEventListener('resize', myChart.resize);
    }
  },
  watch: {
    effectiveData: {
      handler(newData) {
        this.updateChartOption();
      },
      deep: true
    }
  },
  beforeDestroy() {
    if (this.chart && this.chart.dispose) {
      this.chart.dispose();
    }
    window.removeEventListener('resize', this.chart.resize);
  }
}

</script>

<style>
#leftcenter{
  width: 100%;
  height: 100%;
}

</style>